<template>
    <view class="u-demo-block">
        <u-swipe-action>
            <u-swipe-action-item  v-for="(m,index) in orderMail"
                          :key="index"  :name="m"  :options="options"  @click="onClick"
            >
                <view class="addressView" @click="choseAddress(m.id)">
                    <view class="av-1">
                        {{m.address}}
                        <span v-if="m.state==1" class="tag1">默认</span>
                    </view>
                    <view class="av-2">
                        <span class="av-span1">{{m.addressee}}</span>
                        <span class="av-span2">{{m.phone}}</span>
                    </view>

                    <view class="av-3">
                        <u-icon name="edit-pen" @click="modifiedAddress(m)"></u-icon>
                    </view>
                </view>
            </u-swipe-action-item>
        </u-swipe-action>
        <!--修改地址弹窗-->
        <u-popup :show="show" mode="center"  @close="close" @open="open">
            <view class="popupView">
                <view><u--input v-model="mail.addressee"/></view>
                <view><u--input v-model="mail.phone"/></view>
                <view><u--input v-model="mail.address"/></view>
                <button @click="confirmModified">确认</button>
            </view>
        </u-popup>
    </view>
</template>
<script>
    import Request from '../../utils/request'
    import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons";
    export default {
        components: {UniIcons},
        data() {
            return{
                fromOrder:uni.getStorageSync("fromOrder"),
                show:false,
                userId:1,
                value1:2,
                orderMail:[],
                mail:{},
                options: [{
                    text: '删除',
                    style:{
                        backgroundColor: "#B2B2B2"
                    }
                },{
                    text: '设置为默认',
                    style: {
                        backgroundColor: '#f56c6c'
                    }
                }],
            }
        },
        created(){
            this.mailList()
        },
        methods:{
            /*选择地址之后返回到上一页*/
            choseAddress(id){
                if(this.fromOrder==true){
                    uni.setStorageSync("mailId",id)
                    uni.removeStorageSync("fromOrder")
                    uni.navigateTo({
                        url: '/pages/sjh/writeOrder'
                    });
                }
            },
            /*地址列表*/
            mailList() {
                Request.request('management-mall/leyou.order/order-mail/mailList'
                    , {userId: this.userId}, 'post').then(res => {
                    console.log(res)
                    // console.log(res.data.specsList)
                    this.orderMail=res.data.list
                }).catch(error => {
                    console.error(error)
                })
            },
            /*点击修改地址*/
            modifiedAddress(m){
                this.mail.address=m.address
                this.mail.id=m.id
                this.mail.addressee=m.addressee
                this.mail.phone=m.phone
                this.show=true
            },
            /*滑动单元格*/
            onClick(e){
                //删除
                if(e.index==0){
                    let mail=e.name
                    Request.request('management-mall/leyou.order/order-mail/mailRemove'
                        , {id: mail.id}, 'post').then(res => {
                        console.log(res)
                        if(res.success){
                            this.mailList()
                        }
                    }).catch(error => {
                        console.error(error)
                    })
                }
                //设置为默认值
                else if(e.index==1){
                    let mail=e.name
                    Request.request('management-mall/leyou.order/order-mail/setMailDefault'
                        , {mailId: mail.id,userId :this.userId}, 'post').then(res => {
                        console.log(res)
                        if(res.success){
                            this.mailList()
                        }
                    }).catch(error => {
                        console.error(error)
                    })
                }
            },
            /*确认修改*/
            confirmModified(){
                Reflect.deleteProperty(this.mail,"insertTime")
                Reflect.deleteProperty(this.mail,"modifiedTime")
                //alert(JSON.stringify(this.mail))
                Request.request('management-mall/leyou.order/order-mail/mailModified'
                    , this.mail, 'post').then(res => {
                    console.log(res)
                    if(res.success){
                        this.close()
                        this.mailList()
                    }
                }).catch(error => {
                    console.error(error)
                })
            },
            /*弹出层 的开关*/
            close(){
                this.show=false
            },
            open(){
                this.show=true
            }
        }
    }
</script>

<style>
    .addressView{
        margin: 10px 5px;
        position: relative;
    }
    .av-3{
        position: absolute;
        right: 20px;
        top:10px
    }
    .tag1{
        border-radius: 2px;
        padding: 1px;
        margin-left: 5px;
        font-size: 6px;
        background: #8cc5ff;
        color: #e1f3d8;
        vertical-align: text-top;
    }
    .popupView{
        padding: 20px;
    }
    .av-span2{
        margin-left: 10px;
    }
</style>
